<template>
  <div class="tradingview-widget-container">
    <!-- 左侧热门 -->

    <div class="title_box">
      <i class="iconfont icon-huore-s"></i>
      <span>熱門品種：</span>
    </div>

    <div
      ref="widgetContainer"
      class="tradingview-widget-container__widget"
    ></div>
    <!-- 右侧时间 -->
    <div class="time_scroll">
      <p>當前時間：2025/06/03 05:37:46</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";

const props = defineProps({
  symbols: {
    type: Array,
    default: () => [
      {
        proName: "FOREXCOM:SPXUSD",
        title: "S&P 500 Index",
      },
      {
        proName: "FOREXCOM:NSXUSD",
        title: "US 100 Cash CFD",
      },
      {
        proName: "FX_IDC:EURUSD",
        title: "EUR to USD",
      },
      {
        proName: "BITSTAMP:BTCUSD",
        title: "Bitcoin",
      },
      {
        proName: "BITSTAMP:ETHUSD",
        title: "Ethereum",
      },
    ],
  },
  height: {
    type: Number,
    default: 30, // 默认高度60px
  },
  colorTheme: {
    type: String,
    default: "dark",
  },
  locale: {
    type: String,
    default: "en",
  },
  largeChartUrl: {
    type: String,
    default: "",
  },
  isTransparent: {
    type: Boolean,
    default: true,
  },
  showSymbolLogo: {
    type: Boolean,
    default: true,
  },
  displayMode: {
    type: String,
    default: "adaptive",
  },
});

const widgetContainer = ref(null);

const loadWidget = () => {
  if (!widgetContainer.value) return;

  const script = document.createElement("script");
  script.src =
    "https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js";
  script.async = true;
  script.innerHTML = JSON.stringify({
    symbols: props.symbols,
    colorTheme: props.colorTheme,
    locale: props.locale,
    largeChartUrl: props.largeChartUrl,
    isTransparent: props.isTransparent,
    showSymbolLogo: props.showSymbolLogo,
    displayMode: props.displayMode,
    height: props.height,
  });

  // 清除旧内容并添加新脚本
  widgetContainer.value.innerHTML = "";
  widgetContainer.value.appendChild(script);
};

onMounted(() => {
  loadWidget();
});

// 监听相关props变化
watch(
  () => [
    props.symbols,
    props.colorTheme,
    props.locale,
    props.isTransparent,
    props.showSymbolLogo,
    props.displayMode,
  ],
  () => {
    loadWidget();
  },
  { deep: true }
);
</script>

<style scoped lang="less">
.tradingview-widget-container {
  width: calc(100% - 120px);
  height: 30px;
  min-height: 30px;
  padding: 0 15px;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(32, 43, 44);
  min-width:1200px;
}
.tradingview-widget-container__widget {
 flex:1;
  height: 140%;
  overflow: hidden;
}
.title_box {
  font-size: 14px;
  color: #ffffff;
  opacity: 0.7;
  .icon-huore-s {
    margin-right: 10px;
  }
}
.time_scroll {
  color: #fff;
  opacity: 0.5;
  font-size: 14px;
  margin-left: 10px;
}
.tradingview-widget-copyright {
  font-size: 13px;
  line-height: 32px;
  text-align: center;
  vertical-align: middle;
  font-family: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu,
    sans-serif;
  color: #9db2bd;

}

.tradingview-widget-copyright .blue-text {
  color: #2962ff;
}

.tradingview-widget-copyright a {
  text-decoration: none;
  color: #9db2bd;
}

.tradingview-widget-copyright a:visited {
  color: #9db2bd;
}
</style>
